<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="shopping" ng-controller="uploadController">
<!--
文件上传的提交方式必须为：post
enctype的设置的内容必须为：multipart/form-data
-->
<!--<form action="upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
</form>-->
<input type="file" id="fileId">
<button ng-click="upload()">上传</button>
<br>
<hr>
<br>
<img src="{{imgUrl}}">

<script src="/scripts/plugins/angularjs/angular.min.js"></script>
<script>
    let shopping = angular.module("shopping", []);
    //定义文件上传的服务
    shopping.service('uploadService', function ($http) {
        //定义上传的方式
        this.uploadFile = function () {
            let formdata = new FormData();//实例化一个表单对象
            //fileId 文件框中的id值
            formdata.append('file', fileId.files[0]);
            return $http({
                url:"/upload",
                method:"post",
                data:formdata,
                headers:{'Content-type':undefined}, //enctype="multipart/form-data"
                transformRequest:angular.identity
            });

        }
    });

    shopping.controller("uploadController",function($scope,uploadService){
        $scope.upload=function(){
            uploadService.uploadFile().then(function success(response){
                console.log(response);
                $scope.imgUrl=response.data.message;
            });
        }
    });


</script>
</body>
</html>